<template>
	<div>
		<el-form :model="queryForm" ref="queryForm" size="small" :inline="true">
			<el-form-item label="订单编号" prop="number">
				<el-input v-model="queryForm.number" placeholder="请输入订单编号" clearable />
			</el-form-item>
			<el-form-item label="审批人" prop="single">
				<el-select v-model="queryForm.single" placeholder="审核人" clearable>
					<el-option v-for="dict in users" :key="dict.id" :label="dict.name" :value="dict.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="单据状态" prop="productReturnState">
				<el-select v-model="queryForm.productReturnState" placeholder="状态" clearable>
					<el-option v-for="dict in productReturnState" :key="dict.dicDataVal" :label="dict.dicDataLabel"
						:value="dict.dicDataVal" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="small" @click="">搜索</el-button>
				<el-button icon="el-icon-refresh" size="small" @click="">重置</el-button>
			</el-form-item>
		</el-form>

		<!-- 表单组件 -->
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="待办" name="todos">
				<el-table ref="singleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="number" label="订单编号" align="center">
					</el-table-column>
					<el-table-column prop="appealName" label="申诉记录名称" align="center">
					</el-table-column>
					<el-table-column prop="auditor" label="记录人" align="center">
						<template slot-scope="scope">
							<div v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
								<div v-if="scope.row.auditor == item.id">
									{{item.name}}
									</v-if>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="single" label="审核人" align="center">
						<template slot-scope="scope">
							<div v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
								<div v-if="scope.row.single == item.id">
									{{item.name}}
									</v-if>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="记录时间" align="center">
					</el-table-column>
					<el-table-column prop="approvalTime" label="审批时间" align="center">
					</el-table-column>
					<el-table-column prop="productReturnState" label="单据状态" align="center">
						<template slot-scope="scope">
							<div v-for="item in productReturnState" :key="item.dicDataId" :label="item.dicDataLabel"
								:value="item.dicDataVal">
								<div v-if="scope.row.productReturnState == item.dicDataVal">
									{{item.dicDataLabel}}
									</v-if>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="brand" label="操作" align="center" show-overflow-tooltip width="240px">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-view"
								@click="handleCheck(scope.$index,scope.row)">查看</el-button>
							<el-button size="mini" type="text" icon="el-icon-edit"
								@click="showApprove(scope.$index,scope.row)">审核</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete"
								@click="taskById(scope.$index,scope.row)">审核跟踪</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryForm.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="queryForm.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</el-tab-pane>
			<el-tab-pane label="已办" name="historys">
				<el-table ref="singleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="number" label="订单编号" align="center">
					</el-table-column>
					<el-table-column prop="appealName" label="申诉记录名称" align="center">
					</el-table-column>
					<el-table-column prop="auditor" label="记录人" align="center">
						<template slot-scope="scope">
							<div v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
								<div v-if="scope.row.auditor == item.id">
									{{item.name}}
									</v-if>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="single" label="审核人" align="center">
						<template slot-scope="scope">
							<div v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
								<div v-if="scope.row.single == item.id">
									{{item.name}}
									</v-if>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="createTime" label="记录时间" align="center">
					</el-table-column>
					<el-table-column prop="approvalTime" label="审批时间" align="center">
					</el-table-column>
					<el-table-column prop="productReturnState" label="单据状态" align="center">
						<template slot-scope="scope">
							<div v-for="item in productReturnState" :key="item.dicDataId" :label="item.dicDataLabel"
								:value="item.dicDataVal">
								<div v-if="scope.row.productReturnState == item.dicDataVal">
									{{item.dicDataLabel}}
									</v-if>
								</div>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="brand" label="操作" align="center" show-overflow-tooltip width="240px">
						<template slot-scope="scope">
							<el-button size="mini" type="text" icon="el-icon-view"
								@click="handleCheck(scope.$index,scope.row)">查看</el-button>
							<el-button size="mini" type="text" icon="el-icon-edit"
								@click="showApprove(scope.$index,scope.row)">审核</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete"
								@click="taskById(scope.$index,scope.row)">审核跟踪</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryForm.pageNum" :page-sizes="[10, 20, 30, 40]" :page-size="queryForm.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</el-tab-pane>
		</el-tabs>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				queryForm: {
					number: '',
					auditor: '',
					single: '',
					productReturnState: '',

					pageNum: 1,
					pageSize: 10,
					total: 0,
				},
				users: [],
				productReturnState: [],

				activeName: 'todos',
				approveForm: {
					applyOrderId: null,
					goods: {},
					taskApproveComment: null,
					taskApproveResult: null,
				},
				total: null,
				tableData: [],
				tasksData: [],
				historyTableData: [],
				dialogVisible: false,
				approveDialogVisible: false
			};



		},
		methods: {
			handleClick(tab, event) {
				let i = tab.index;
				if (i == 0) {
					this.getTodos();
				} else if (i == 1) {
					this.getHistorys();
				}
			},
			getTodos() {
				axios.get('verify/todos').then(resp => {
					this.tableData = resp.data.list;
					this.queryForm.pageNum = resp.data.pageNum;
					this.queryForm.pageSize = resp.data.pageSize;
					this.total = resp.data.total;
				})
			},
			getHistorys() {
				axios.get('verify/historys').then(resp => {
					this.tableData = resp.data.list;
					this.queryForm.pageNum = resp.data.pageNum;
					this.queryForm.pageSize = resp.data.pageSize;
					this.total = resp.data.total;
				})
			},
			handleSizeChange(val) {

			},
			handleCurrentChange(val) {

			},
			taskById(row) {
				axios.get("verify/tasks/" + row.id).then(resp => {
					this.dialogVisible = true;
					this.tasksData = resp.data;
				})
			},
			doApprove(result) {
				debugger;
				this.approveForm.taskApproveResult = result;
				axios.post('verify/doApprove', this.approveForm).then(resp => {
					this.suc("ok");
				})
			},
			showApprove(row) {
				this.approveDialogVisible = true;
				this.approveForm.goods = row.goods;
				this.approveForm.applyOrderId = row.id;
			}

		},
		created() {
			this.getTodos();
			this.$axios.get("/users/dic/order_type").then(resp => {
				this.dicOrderTypeData = resp.data;
			});
			this.$axios.get("/users/dic/cnee_DeliMethod").then(resp => {
				this.dicNeeDeliMethodData = resp.data;
			});
			this.$axios.get("/users/dic/order_action").then(resp => {
				this.dicOrderActionData = resp.data;
			});
			this.$axios.get("/users/dic/cnee_deli_way").then(resp => {
				this.dicCneeDeliWayData = resp.data;
			});
		},

		mounted() {

		},
	};
</script>

<style>
</style>
